/*
 * @Descripttion: 
 * @version: 
 * @Author: Indolphin
 * @Date: 2021-03-03 23:31:59
 * @LastEditors: Indolphin
 * @LastEditTime: 2021-03-17 22:09:04
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import Loading from '../../components/Loading';
import { Layout, Menu, Breadcrumb, Dropdown, Divider } from 'antd';
import { reducerType } from '../../store/reducers';
import { logoutUser } from '../../store/actions';
import logo from './images/logo.png';
import './Admin.less';
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
  } from '@ant-design/icons';
import { User } from '../../interface';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

interface IProps {
    history: any,
    user: User,
    logout: Function
}

interface IState {
    loading: boolean,
    collapsed: boolean
}

class Admin extends Component<IProps, IState> {

    readonly state: Readonly<IState> = {
        loading: true,
        collapsed: false
    }

    onCollapse = (collapsed: boolean) => {
        console.log(collapsed);
        this.setState({ collapsed });
      };

    /**
     * 用户注销
     * 
     * @param {*}
     * @return {*}
     */
    logout = () => {
        this.props.logout();
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                loading: false
            });
        }, 1000);
    }

    render() {
        const { loading, collapsed } = this.state;

        const { username } = this.props.user;

        if(username == null || username.length == 0) {
            this.props.history.push("/login");
        }

        const menu = (
            <Menu>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                  用户信息
                </a>
              </Menu.Item>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                  修改密码
                </a>
              </Menu.Item>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" onClick={this.logout}>
                  注销
                </a>
              </Menu.Item>
            </Menu>
        ); 
        
        return (
            loading
            ?
            <Loading />
            :
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <div className="title" style={collapsed? {textAlign: 'center'} : {}}>
                        {
                            collapsed
                            ?
                            <img src={logo} style={{height:30, width: 30}}/>
                            :
                            <div>
                                <img src={logo} style={{height:30, width: 30, marginLeft: 16}}/>
                                <a>Stone基础平台</a>
                            </div>
                        }
                    </div>
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1" icon={<PieChartOutlined />}>
                            首页
                        </Menu.Item>
                        <Menu.Item key="2" icon={<FileOutlined />}>
                            设施管理
                        </Menu.Item>
                        <Menu.Item key="3" icon={<DesktopOutlined />}>
                            基础设施
                        </Menu.Item>
                        <Menu.Item key="4" icon={<FileOutlined />}>
                            资源配置
                        </Menu.Item>
                        <Menu.Item key="5" icon={<FileOutlined />}>
                            用户管理
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="header" style={{ padding: 0 }}>
                        <div className="user-content">
                            <Dropdown overlay={menu} placement="bottomLeft" arrow>
                                <a>{this.props.user.username}</a>
                            </Dropdown>
                        </div>
                    </Header>
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        Bill is a cat.
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Indolphin Copyright ©2018 </Footer>
                </Layout>
            </Layout>
        );
    }
}

function mapStateToProps(state: reducerType) {
    return {
        user: state.user
    };
}

function mapDispatchToProps(dispatch: Dispatch) {
    return {
        logout: () => {dispatch(logoutUser())}
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(Admin);